<template>
  <div style="height:100%;width:100%;position:relative;">
    <div class="pagetop">
      <template>
        <div style="width:100%">
          <div style="float:left;width:100%">
            <table style="font-size:12px" class="table1style">
              <tr>
                <td>样本库</td>
                <td align="right">
                  <el-select v-model="selLibrid" filterable style="width:120px" @change="BtnQuery()" clearable
                    ref="selLibrid">
                    <el-option v-for="(item, index) in selSmpLibrary_Options" :key="index" :value="item.librid"
                      :label="item.librname"></el-option>
                  </el-select>
                </td>
                <td align="right">操作日期</td>
                <td>
                  <el-date-picker v-model="ddltxtSmpDate1" :able="false" type="date" placeholder="选择日期"
                    value-format="yyyy-MM-dd" style="width:110px;" :clearable="false">
                  </el-date-picker>
                </td>
                <td align="center" style="width:15px;padding:0 0 0 0px">至</td>
                <td>
                  <el-date-picker v-model="ddltxtSmpDate2" type="date" :able="false" placeholder="选择日期"
                    value-format="yyyy-MM-dd" style="width:110px" :clearable="false">
                  </el-date-picker>
                </td>
                <td align="right"> 操作类型</td>
                <td>
                  <el-select v-model="ddllogtype" placeholder="请选择" style="width:160px">
                    <el-option value="" label="全部"></el-option>
                    <el-option v-for="(item, index) in $opt.smpLogOption" :key="index" :value="item.value"
                      :label="item.label"></el-option>
                  </el-select>
                </td>
                <td align="right"> 操作人</td>
                <td>
                  <el-input v-model.trim="txtUser" placeholder="" style="width:100px"></el-input>
                </td>
                <td align="right">留样条码</td>
                <td>
                  <el-input v-model.trim="txtSmp_Barcode" placeholder="" style="width:120px"
                    ref="rSmp_Barcode"></el-input>
                </td>
                <td style="width:100%" align="right">
                  <el-button icon="el-icon-search" type="primary" v-has="'PINQUERY'" @click="BtnQuery()">查询</el-button>
                  <el-button style="float:right" icon="el-icon-upload" @click="BtnQuery()">打印样式</el-button>
                  <el-button icon="el-icon-sort" @click.native="BtnSort()">排序</el-button>
                  <el-button icon="el-icon-close" @click.native="BtnClear()">清除</el-button>
                  <el-button icon="el-icon-refresh-right" @click="BtnPrint()">打印</el-button>
                  <el-button icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport()">导出</el-button>
                </td>
              </tr>
            </table>
          </div>
          <!-- <div style="float:right">
                      <table>
                          <tr>
                              <td>
                                  <el-button icon="el-icon-search" type="primary" v-has="'PINQUERY'" @click="BtnQuery()">查询</el-button>
                              </td>
                              <td>
                              <el-button style="float:right" icon="el-icon-upload"  @click="BtnQuery()">打印样式</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-sort" @click.native="BtnSort()">排序</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-close" @click.native="BtnClear()">清除</el-button>
                              </td>
                              <td style="text-align:left">
                                  <el-button icon="el-icon-refresh-right" @click="BtnPrint()">打印</el-button>
                              </td>
                              <td>
                                  <el-button icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport()">导出</el-button>
                              </td>
                          </tr>
                      </table>
                  </div> -->
        </div>
      </template>
    </div>
    <div class="pagecenter">
      <!-- <div :class="!is_showselother?'pagemain':'pagemainother'"> -->
      <div :class="'pagemain'">
        <vxe-table :loading="loading" :data.sync="leftTableData" border fit height="auto" header-align="center"
          highlight-current-row highlight-hover-row :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"
          ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe
          :cell-class-name="CellClassName" @current-change="CurrentChangeEvent">
          <!-- <vxe-table-column width="50" field="ischk" title="选择" header-align="center" align="center">
                  <template v-slot="{row}">
                      <el-checkbox true-label="1" false-label="0" v-model="row.ischk"></el-checkbox>
                  </template>
              </vxe-table-column> -->
          <vxe-table-column field="logtype" title="操作类型" width="100px"
            :formatter="['formatSelect', $opt.smpLogOption]"></vxe-table-column>
          <vxe-table-column field="createdate" title="发生日期" width="136px"></vxe-table-column>
          <vxe-table-column field="createuser" title="操作人" width="80px"></vxe-table-column>
          <vxe-table-column field="refuser" title="相关人员" width="100px"></vxe-table-column>
          <vxe-table-column field="usedesc" title="用途" width="150px"></vxe-table-column>
          <vxe-table-column field="remarks" title="备注" width="160px"></vxe-table-column>
          <vxe-table-column field="smp_registerdate" title="登记日期" width="136px"></vxe-table-column>
          <vxe-table-column field="smp_registerno" title="标本号" width="120px"></vxe-table-column>
          <vxe-table-column field="smp_type" title="标本类型" width="120px"></vxe-table-column>
          <vxe-table-column field="smp_quantity" title="标本量" width="100px"></vxe-table-column>
          <vxe-table-column field="smp_unit" title="单位" width="80px"></vxe-table-column>
          <vxe-table-column field="smp_barcode" title="条码号" width="120px"></vxe-table-column>
          <vxe-table-column field="smp_status" title="状态" width="120px"
            :formatter="['formatSelect', $opt.smpSampleOption]"></vxe-table-column>
          <vxe-table-column field="quantitystatus" title="标本余量" width="80px"></vxe-table-column>
          <vxe-table-column field="indate" title="最后入库日期" width="136px"></vxe-table-column>
          <vxe-table-column field="inuser" title="入库人" width="100px"></vxe-table-column>
          <vxe-table-column field="lenddate" title="最后借出日期" width="136px"></vxe-table-column>
          <vxe-table-column field="lenduser" title="借出人" width="120px"></vxe-table-column>
          <vxe-table-column field="outdate" title="销毁日期" width="136px"></vxe-table-column>
          <vxe-table-column field="outuser" title="销毁人" width="100px"></vxe-table-column>
          <vxe-table-column field="lendtime" title="借出次数" width="100px"></vxe-table-column>

          <vxe-table-column field="smp_sampleid" title="样本ID" width="100px"></vxe-table-column>
          <vxe-table-column field="librid" title="样本库ID" width="100px"></vxe-table-column>
        </vxe-table>
      </div>
      <!-- <div class="pagebottom">
              <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.total" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
              </vxe-pager>
          </div> -->
    </div>
  </div>
</template>

<script type="text/javascript">
import { Promise } from "q"
import { invalid } from "moment"
import XE from "xe-utils" //引入工具类
XE.mixin({
  // 自定义全局的格式化处理函数
  formatSelect(cellValue, list) {
    let item = list.find((item) => item.value == cellValue);
    return item ? item.label : "";
  },
});
export default {
  name: "SMP311",
  data() {
    return {
      //top
      selLibrid: "", //标本库ID
      ddltxtSmpDate1: XE.toDateString(
        new Date().setDate(new Date().getDate() - 8),
        "yyyy-MM-dd"
      ), //操作日期-起始
      ddltxtSmpDate2: XE.toDateString(new Date(), "yyyy-MM-dd"), //操作日期-结束
      ddllogtype: "",
      txtUser: "",
      txtSmp_Barcode: "", //条码号
      loading: false,
      changeflag: false, //Btn是否启用标志
      okFirstLoading: true,
      tableData: [],
      tempindex: 0,
      leftTableData: [],
      bindLeftTableData: [],
      msgList: [],
      selSmpLibrary_Options: [], //标本库
      tablePage: {               //分页
        total: 0,
        currentPage: 1,
        pageSize: 50
      },
    }
  },
  created() {
    this.ddlSmp_ibrary()
    //this.BtnQuery(); //初始化主列表
  },
  mounted() {
    this.$refs.rSmp_Barcode.focus()
  },
  updated() { },
  methods: {
    //标本库列表下拉框初始化
    ddlSmp_ibrary() {
      this.$tool
        .request({
          url: "SMP/SMP1/SMP130",
          method: "post",
          data: {
            action: "q_smp_library",
          },
        })
        .then((res) => {
          this.selSmpLibrary_Options = res
          this.selLibrid = this.selSmpLibrary_Options[0].librid
        })
    },
    async BtnQuery() {
      this.lLoading = true
      try {
        if (this.selLibrid == "") {
          return this.$message({
            type: "info",
            message: "请选择样本库！",
          })
        }

        this.$tool
          .request({
            url: "SMP/SMP3/SMP311",
            method: "post",
            data: {
              action: "smp_query_smplog",
              librid: this.selLibrid,
              startdt: this.ddltxtSmpDate1,
              enddt: this.ddltxtSmpDate2,
              logtype: this.ddllogtype,
              createuser: this.txtUser,
              smp_barcode: this.txtSmp_Barcode,
              pagesize: this.tablePage.pageSize,
              currentpage: this.tablePage.currentPage
            },
          })
          .then((res) => {
            this.tablePage.total = res.total;
            this.bindLeftTableData = res.Data
            this.leftTableData = res.Data
          })
      } catch (e) {
        this.$message.warning(e)
      }
    },
    BtnDelete() { },
    BtnSort() { },
    BtnClear() {
      this.selLibrid = this.selSmpLibrary_Options[0].librid
      this.ddltxtSmpDate1 = XE.toDateString(
        new Date().setDate(new Date().getDate() - 8),
        "yyyy-MM-dd"
      ) //操作日期-起始
      this.ddltxtSmpDate2 = XE.toDateString(new Date(), "yyyy-MM-dd") //操作日期-结束
      this.ddllogtype = ""
      this.txtUser = ""
      this.txtSmp_Barcode = ""
      this.$nextTick(() => {
        this.$refs.rSmp_Barcode.focus()
      })
      this.BtnQuery()
    },
    BtnPrint() {
      var sql = ""
      sql = btoa(encodeURIComponent(sql))
      jsObj.PrintCustomReport("5002", sql, "lis", "req_master", "") //*
    },
    BtnExport() {
      let options = {
        filename: "SMP311 标本异动查询-结果信息.csv",
      }
      this.$refs.xTable.exportCsv(options)
    },
    BtnBatchLend() { },
    CurrentChangeEvent({ row, rowIndex }) {
      this.tempindex = rowIndex
    },
    CellClassName({ columnIndex, row }) {
      if (columnIndex == "0" || columnIndex == "1") {
        if (row.flag == "1") {
          //不能再次选择
          return "col-orange"
        } else {
          //新增的数据
          return ""
        }
      } else {
        return ""
      }
    },
    //分页查询
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      let tempdata = this.bindLeftTableData;
      this.leftTableData = [];
      for (let index = 0; index < tempdata.length; index++) {
        if (index > this.tablePage.pageSize * (this.tablePage.currentPage - 1) && index <= this.tablePage.pageSize * this.tablePage.currentPage) {
          const element = tempdata[index];
          this.leftTableData.push(element);
        }
      }

      // this.BtnQuery();
    },

    /**打印标签条码 */
    StartPrintBarcode(cData) {
      if (typeof jsObj != undefined && typeof jsObj !== 'undefined') {
        let columnRegister = this.$refs.xTable.getTableColumn().tableColumn;
        let columnSample = this.$refs.xTableSample.getTableColumn().tableColumn;
        let columns = this.$pub.InitColumn(columnRegister.concat(columnSample));
        // columns.push({ title: "创建人", property: "createuser" });
        // columns.push({ title: "创建时间", property: "createdt" });
        let strbase = JSON.stringify(columns);
        strbase += "\r";

        for (let item of cData) {
          let itemtmp = Object.assign({}, this.OldPatientInfo, item);
          console.log('item :', itemtmp);
          console.log('JSON.stringify(itemtmp) ：', JSON.stringify(itemtmp));
          // let str = strbase + JSON.stringify('['+itemtmp+']');
          let str = strbase + '[' + JSON.stringify(itemtmp) + ']';
          console.log('strbase + JSON.stringify(itemtmp) ：', str);
          let sql = btoa(encodeURIComponent(str));
          console.log(this.barcodestyle);
          jsObj.PrintCustomJsonReport(this.barcodestyle, sql, this.$tool.getSession(this.$tool.loginusername), "样本信息打印", "");
        }
      } else {
        this.$alert("请使用" + this.$pub.clientname + "", "提示");
      }
    },
  },
}
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 40px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  white-space: nowrap;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  white-space: nowrap;
}

.pagecenter {
  position: absolute;
  top: 45px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 405px;
  overflow: auto;
}

.middle-right {
  position: absolute;
  height: 100%;
  width: 400px;
  right: 0px;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
}

.pagemain {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  right: 0px;

   
}

.pagebottom {
  position: absolute;
  height: 45px;
  left: 0px;
  right: 0px;
  overflow: visible;
  bottom: 0px;
  z-index: 999;
}

::v-deep .vxe-table .vxe-body--column.col-orange {
  background-color: #f8f8f8;
}

::v-deep.el-input--suffix .el-input__inner {
  padding-right: 0px;
}</style>
